<template>
	<view class="content">
		<view class="mt20">
			<u-cell-item :border-bottom="false" hover-class="none" title="隐私设置" @click="nav('yinsi')">
			</u-cell-item>
			
			<!-- <view class="lab">个性化推荐</view> -->
			<u-cell-item :border-bottom="false" @click="checkedfour" :arrow="false" hover-class="none" title="个性化推荐">
				<u-switch slot="right-icon" size="40" v-model="checked4"></u-switch>
			</u-cell-item>
			<u-cell-item :border-bottom="false" @click="checkedfive" :arrow="false" hover-class="none" title="青少年模式">
				<u-switch slot="right-icon" size="40" v-model="checked5"></u-switch>
			</u-cell-item>
			<u-cell-item :border-bottom="false" hover-class="none" title="手机号码" @click="nav('phone')">
			</u-cell-item>
			<!-- <u-cell-item :border-bottom="false" hover-class="none" title="修改支付密码" @click="nav('paypwd')">
			</u-cell-item> -->
		</view>
		<view class="mt20">
			<u-cell-item :border-bottom="false" hover-class="none" title="平台使用规范" @click="nav('webview','id','1')">
			</u-cell-item>
			<u-cell-item :border-bottom="false" hover-class="none" title="用户使用规范" @click="nav('webview','id','2')">
			</u-cell-item>
			<u-cell-item :border-bottom="false" hover-class="none" title="用户隐私规范" @click="nav('webview','id','3')">
			</u-cell-item>
		</view>
		<view class="mt20">
			<u-cell-item :border-bottom="false" hover-class="none" title="意见反馈" @click="nav('feedback')">
			</u-cell-item>
			<u-cell-item :border-bottom="false" hover-class="none" title="注销账号" @click="zhuxiaomodal = true">
			</u-cell-item>
			<u-cell-item :border-bottom="false" hover-class="none" title="当前版本" @click="version" value="0.0.1">
			</u-cell-item>
			<u-cell-item :border-bottom="false" hover-class="none" title="退出登录" @click="logout">
			</u-cell-item>
		</view>
		<u-modal v-model="zhuxiaomodal" @confirm="nav('delete')" content="注销账号会清空您的所有账号信息,是否要继续注销？" show-cancel-button></u-modal>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				zhuxiaomodal: false,
				checked4: true,
				checked5: true
			}
		},
		onShow() {
			var that = this;
			var tuijian = uni.getStorageSync('tuijian')?uni.getStorageSync('tuijian'):0;
			if(tuijian==0){ 
				that.checked4=true;
			}else{
				that.checked4=false;
			}
			var qingshaonian = uni.getStorageSync('qingshaonian')?uni.getStorageSync('qingshaonian'):0;
			if(qingshaonian==0){ 
				that.checked5=true;
			}else{
				that.checked5=false;
			}
		},
		methods: {
			nav(url, params, value) {
				if(url == 'phone'){
					// #ifdef MP-WEIXIN
						return this.$u.toast('请下载开心小圈APP进行绑定手机号码')
					// #endif
				}
				uni.navigateTo({
					url: `/pages/${url}/index${params?'?'+params+'='+value:''}`
				})
			},
			logout(){
				this.$store.commit('logout')
			},
			version(){
				this.$u.toast('当前已是最新版本')
			},
			checkedfour(){
				var that = this;
				if(that.checked4){
					// that.checked4 = false;
					uni.showToast({
						title: '已开启个性化推荐,重启程序后生效',
						icon: 'none'
					})
					uni.setStorage({key: 'tuijian', data:0})
				}else{
					// that.checked4 = true;
					uni.showToast({
						title: '已关闭个性化推荐,重启程序后生效',
						icon: 'none'
					})
					uni.setStorage({key: 'tuijian', data:1})
				}
			},
			checkedfive(){
				var that = this;
				if(that.checked5){
					// that.checked4 = false;
					uni.showToast({
						title: '已开启青少年模式,重启程序后生效',
						icon: 'none'
					})
					uni.setStorage({key: 'qingshaonian', data:0})
				}else{
					// that.checked4 = true;
					uni.showToast({
						title: '已开启青少年模式,重启程序后生效',
						icon: 'none'
					})
					uni.setStorage({key: 'qingshaonian', data:1})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #2A2931;
		/* #ifndef H5 */
		min-height: 100vh;
		/* #endif */
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
		overflow: hidden;
		.mt20{
			background-color: #222128;
			margin-top: 20rpx;
			/deep/.u-cell_title{
				color: #eee;
			}
			/deep/.u-cell__value{
				color: #CCC;
			}
		}
	}
</style>
